<!--
 * @Date: 2022-05-09 14:46:54
 * @Author: 陶子
 * @LastEditTime: 2023-06-06 19:14:00
 * @FilePath: \jk_one-stop_pc\src\views\baseManagement\maintain\malfunctionRepair\newRepair.vue
 * @pageName: 这是--(新建报修)--页面
-->
<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
      @close="onClose"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['设备管理', '设备维修', '故障报修']" currentMenu="新建报修"></crumbs>
    <div class="form-body">
      <a-card title="基本信息" :bordered="false" style="margin-top: 12px">
        <a-form-model ref="ruleFormOne" :model="buildForm" :rules="rules">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="故障设备" style="width: 100%" prop="deviceInfo">
                <a-input
                  @click="openIt"
                  v-model="buildForm.deviceInfo"
                  placeholder="请选择"
                  :read-only="true"
                  :class="buildForm.deviceInfo ? 'has-value' : ''"
                >
                  <a-icon slot="suffix" type="down" style="color: #cdcdcd; font-size: 12px" class="down-icon" />
                  <a-icon
                    slot="suffix"
                    type="close-circle"
                    theme="filled"
                    class="close-icon"
                    @click="getSelectValue(false, '', [])"
                  />
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="设备类别" style="width: 100%">
                <a-input v-model="buildForm.deviceCategoryText" disabled placeholder="-" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card title="故障信息" :bordered="false" style="margin-top: 12px">
        <a-form-model ref="ruleFormTwo" :model="buildForm" :rules="rules">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="紧急程度" style="width: 100%">
                <a-select v-model="buildForm.urgency" allowClear class="row-input" placeholder="请选择">
                  <a-select-option v-for="item in urgentList" :key="item.value" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="7">
              <a-form-model-item label="发生时间" style="width: 100%">
                <a-date-picker
                  v-model="buildForm.happenTime"
                  style="width: 100%"
                  :show-time="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  placeholder="请选择"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="15">
              <a-form-model-item label="故障描述" prop="faultDescription">
                <a-textarea placeholder="请输入" :maxLength="500" v-model="buildForm.faultDescription" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-form-model-item label="附件" style="flex: 1">
              <file-upload :ids="attachment" @getFileList="getFileList"></file-upload>
              <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，大小不可超过20M</p>
            </a-form-model-item>
          </a-row>
        </a-form-model>
      </a-card>
      <div style="margin-top: 12px">
        <Examine @submitProcess="submitProcess" type="0" id="MESS_DEVICE_REPAIR" ref="examine" />
        <div style="height: 50px"></div>
      </div>
    </div>
    <div
      class="footer-submit form-footer"
    >
      <a-button @click="submitProcess" type="primary" :loading="subLoading" class="submitBtn"> 提交222 </a-button>
    </div>
    <tableSelect ref="tableSelect" @getSelectValue="getSelectValue" :key="indexNumber">
      <div slot="head">
        <div class="uni-card" style="background: #fff">
          <a-form-model ref="ruleForm" layout="inline" :model="filterForm">
            <a-form-model-item label="设备编号">
              <a-input v-model="filterForm.deviceCode" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="设备名称">
              <a-input v-model="filterForm.deviceName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button @click="searchNumber()" type="primary"> 搜索 </a-button>
              <a-button style="margin-left: 10px" @click="searchResetNumber">重置</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </tableSelect>
  </jke-modal>
</template>
<script>
import tableSelect from '@/components/tableSelect'
import { ajaxGetDictItems } from '@/api/api'
import moment from 'moment'
import Examine from '@/components/examine'
import { repairAdd } from '@/api/productOrder'
import crumbs from '@/components/crumbs.vue'
import FileUpload from '@/components/fileActions/FileUpload.vue'
export default {
  data() {
    return {
      jkeForm: {
        title: '新建报修',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      goodsValue: '',
      goodsText: '',
      subLoading: false,
      buildForm: {
        deviceInfo: '',
        deviceCategoryText: '',
        urgency: undefined,
        happenTime: null,
        faultDescription: '',
      },
      urgentList: [],
      rules: {
        deviceInfo: [{ required: true, message: '请选择', trigger: 'blur' }],
        faultDescription: [{ required: true, message: '请输入故障描述', trigger: 'blur' }],
      },
      //分割线
      attachment: '', //附件
      //下拉改弹窗
      filterForm: {},
      indexNumber: 0,
      columns: [
        {
          title: '设备编号',
          ellipsis: true,
          width: 120,
          dataIndex: 'deviceCode',
        },
        {
          title: '设备名称',
          width: 120,
          ellipsis: true,
          dataIndex: 'deviceName',
        },
        {
          title: '规格',
          width: 90,
          ellipsis: true,
          dataIndex: 'spec',
        },
        {
          title: '购买日期',
          dataIndex: 'purchaseDate',
          ellipsis: true,
          width: 120,
        },
        {
          title: '保修期(月)',
          dataIndex: 'warranty',
          ellipsis: true,
          width: 120,
        },
      ],
    }
  },
  components: {
    FileUpload,
    crumbs,
    Examine,
    tableSelect,
  },
  methods: {
    initForm() {
      this.jkeForm.visible = true
      let currentTime = new Date()
      this.buildForm.happenTime = moment(currentTime).format('YYYY-MM-DD HH:mm')
      ajaxGetDictItems('mess_repair_urgent_level', null).then((res) => {
        if (res.success) {
          this.urgentList = res.result
        }
      })
    },
    // 编号下拉改弹窗
    openIt() {
      let par = {
        list: '/mess/device/pageQueryDeviceEntity',
        visible: true, //弹窗开启
        title: '编号', //标题名称
        multi: false, //是否多选
        columns: this.columns, //表格配置
        value: this.goodsValue,
        valueKey: 'id', //需要拿到数据的key，如：id，userId等
        text: this.goodsText, //回显的中文key
        textkey: 'deviceName',
      }
      this.$refs.tableSelect.getInit(par)
    },
    searchResetNumber() {
      this.filterForm.deviceCode = ''
      this.filterForm.deviceName = ''
      this.$refs.tableSelect.searchReset()
    },
    searchNumber() {
      this.$refs.tableSelect.searchQuery(this.filterForm)
    },
    getSelectValue(id, text, item) {
      if (!id) {
        this.buildForm.deviceInfo = ''
        this.buildForm.deviceId = ''
        this.buildForm.deviceCategoryText = ''
        this.goodsText = ''
        this.goodsValue = ''
        return
      }
      this.indexNumber += 1 //重置组件去除表格默认勾选数据，让自己赋值的数据回显（重要！！！）
      this.goodsText = text
      this.goodsValue = id
      this.buildForm.deviceId = item[0].id
      this.buildForm.deviceCategoryText = item[0].deviceCategoryText
      this.buildForm.deviceInfo = item[0].deviceCode + '-' + item[0].deviceName
      this.$refs.ruleFormOne.validateField(['deviceInfo'])
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    onClose() {
      this.goodsValue = ''
      this.goodsText = ''
      this.subLoading = false

      this.buildForm = {
        deviceInfo: '',
        deviceCategoryText: '',
        urgency: undefined,
        happenTime: null,
        faultDescription: '',
      },
      this.attachment = ''

      this.urgentList = []
      this.filterForm = {}
      this.indexNumber = 0
    },
    /* 获取附件 */
    getFileList(v) {
      this.attachment = v
    },
    // 提交（必须使用名为submitProcess方法进行提交）
    submitProcess(e) {
      if (e.nodeDtos) {
        // 获取到数据后写表单提交的方法
        this.submitForm(e)
      } else {
        // 调用子组件的方法获取数据
        this.$refs.examine.confirm()
      }
    },
    // 提交
    submitForm(processDataVo) {
      this.$refs.ruleFormOne.validate((valid) => {
        if (valid) {
          console.log('基本信息验证通过')
          this.$refs.ruleFormTwo.validate((valid) => {
            if (valid) {
              console.log('故障信息验证通过')
              this.handleSubmit(processDataVo)
            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    handleSubmit(processDataVo) {
      this.subLoading = true
      let params = {
        ...this.buildForm,
        attachment: this.attachment,
        processDataVo: processDataVo,
      }
      params.happenTime = moment(params.happenTime).format('YYYY-MM-DD HH:mm:ss')
      console.log('拦截看看参数：', params)
      repairAdd(params).then((res) => {
        if (res.success) {
          this.$antdMessage.success('故障报修成功')
          this.$emit('refresh')
          this.onClose()
          this.goBack()
        } else {
          this.$antdMessage.warning(res.message)
        }
        this.subLoading = false
      }).catch((err) => {
        this.subLoading = false
      }).finally(() => {
        this.subLoading = false
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 100px);
  overflow-y: scroll;
}
.submitBtn {
  .flex(flex-end, center);
  padding: 8px;
}
.flexBox {
  .flex(flex-start, center);
}
.havePadding {
  .flex(center, center);
  width: 90%;
  font-size: 12px;
  color: #888888;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
// 工艺路线结束
</style>
